<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        #app {
            max-width: 600px;
            margin: 50px auto;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 3px;
            margin-bottom: 5px;
        }

        .salary-statement {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div id="app">
<!--    <h1>备忘录</h1>-->
<!--    <input type="text" v-model="newItem" @keyup.enter="addItem">-->
<!--    <ul>-->
<!--        <div v-for="(item, index) in items" :key="index">-->
<!--            <div style="margin-top: 20px">-->
<!--                <li>{{ item.value }}</li>-->
<!--                <span>{{item.date}}</span>-->


<!--            </div>-->

<!--        </div>-->
<!--    </ul>-->
    <input type="text" v-model="searchInput" placeholder="搜索员工" />
    <button @click="searchEmployee">查找员工</button>
    <div class="salary-statement">
        <h1>工资条</h1>
        <form @submit.prevent="addEmployee">
            <label for="name">姓名：</label>
            <input type="text" id="name" v-model="newEmployee.name" required/>
            <br/>
            <label for="baseSalary">基本工资：</label>
            <input type="number" id="baseSalary" v-model="newEmployee.baseSalary" required/>
            <br/>
            <label for="bonus">奖金：</label>
            <input type="number" id="bonus" v-model="newEmployee.bonus" required/>
            <br/>
            <label for="deduction">扣款：</label>
            <input type="number" id="deduction" v-model="newEmployee.deduction" required/>
            <br/>
            <button type="submit">添加员工</button>
        </form>
        <table>
            <thead>
            <tr>
                <th>姓名</th>
                <th>基本工资</th>
                <th>奖金</th>
                <th>扣款</th>
                <th>实发工资</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <div v-if="employeesToDisplay.length>0">

            <tr v-for="(employee, index) in employeesToDisplay" :key="index">
                <td>{{ employee.name }}</td>
                <td>{{ employee.baseSalary }}</td>
                <td>{{ employee.bonus }}</td>
                <td>{{ employee.deduction }}</td>
                <td>{{ employee.realSalary }}</td>
                <td>
                    <button @click="deleteItem(index)">删除</button>
                </td>
            </tr>
            </div>
            <div v-if="employeesToDisplay.length<0">

                <tr v-for="(employee, index) in employee" :key="index">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.baseSalary }}</td>
                    <td>{{ employee.bonus }}</td>
                    <td>{{ employee.deduction }}</td>
                    <td>{{ employee.realSalary }}</td>
                    <td>
                        <button @click="deleteItem(index)">删除</button>
                    </td>
                </tr>
            </div>
            </tbody>
        </table>
    </div>
</div>

<script src="js/vue2.7.js"></script>
<script src="js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            items: [],
            newItem: '',
            searchInput: '',
            employees: [],
            employeesToDisplay: [],
            newEmployee: {
                name: "",
                baseSalary: 0,
                bonus: 0,
                deduction: 0,
                realSalary: 0,
            },
        },
        methods: {
            addItem: function () {
                if (this.newItem) {
                    this.items.push({"value": this.newItem, "date": formatTimestamp(new Date())});
                    this.newItem = '';
                }
            },
            deleteItem: function (index) {
                this.employees.splice(index, 1);
            },
            calculateRealSalary: function () {
                this.newEmployee.realSalary = parseInt(this.newEmployee.baseSalary) + parseInt(this.newEmployee.bonus) - this.newEmployee.deduction;
            },
            addEmployee() {
                this.calculateRealSalary();
                this.employees.push({...this.newEmployee});
                this.newEmployee = {
                    name: "",
                    baseSalary: 0,
                    bonus: 0,
                    deduction: 0,
                    realSalary: 0,
                };
            },
            searchEmployee () {
                this.employeesToDisplay = this.employees.filter(employee => employee.name.includes(this.searchInput));

            },
        }
    })

</script>
</body>
</html>
